<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .p1 {
        width: 500px;
        height: 500px;
        /* background-color: aquamarine; */
        margin: auto;
        margin-top: 10px;

    }

    .p2 {
        background-color: cadetblue;
        width: 320px;
        height: 46px;
        margin-top: 20px;
        margin-left: 89px;
    }

    .p3 {
        width: 200px;
        height: 34px;
        margin-left: 140px;
        margin-top: 68px;
    }

    .p4 {
        width: 200px;
        height: 34px;
        margin-left: 140px;
        margin-top: 23px;
    }

    .p5 {
        /* margin: auto; */
        /* margin-left: 205px; */
        position: relative;
        top: 67px;
        left: 200px;
    }

    .p6 {
        position: relative;
        top: 67px;
        left: 104px;
    }

  
</style>

<body>

<div>
    
</div>
    <div class="p1">
        <div>
            <h2 class="p5">注册</h2>
            <h3 class="p6">用户你好请使用
                <a href="">QQ邮箱</a>
                进行注册
            </h3>
        </div>
        <input id="username" name="username" tabindex="1" accesskey="n" type="text" value="" size="25"
            placeholder="手机号/邮箱" class="p3"><br>
        <input id="password" name="password" tabindex="2" accesskey="p" type="password" value="" size="25"
            placeholder="密码" class="p4" class="passwordInput">
        <button onclick="deng()" class="p2">注册</button>
    </div>


    <script>
        var inp1 = document.querySelectorAll('input')[0]
        var inp2 = document.querySelectorAll('input')[1]
        function deng() {
              var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/
        
        if (!passwordRegex.test(inp2.value)) {
            errorMsg.textContent = "密码必须为8-20位，且包含字母和数字"
            return false
        }
        
            localStorage.setItem('name', inp1.value)
            localStorage.setItem('passord', inp2.value)
            location.assign('./6.3.项目登录.html')
        }
   </script>
</body>

</html>
